<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>time choose</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .time_box{width:240px;height:auto;margin:8px 0 ;padding: 10px 0 4px 0;display: none;border: 1px solid #ccc;border-radius:4px;}
            .time_box .time_list{padding: 0;margin: 0;} 
            .time_box .time_item{list-style-type: none;}
            .time_box .prev,
            .time_box .next{width: 20px;height: 20px;line-height: 18px;margin: 0 4px;display: inline-block;color: rgb(167, 163, 163);border-radius: 50%;border: 1px solid rgb(204,204,204);cursor: pointer;text-align: center;vertical-align: middle;}
            .time_box .current{width: 60px;height: 24px;vertical-align: middle;line-height: 24px;text-indent: 0;margin: 0 4px;}
            .time_box .month{display: inline-block;padding:8px;}
        </style>
        <script src="jquery-2.1.1.min.js" type="text/javascript"></script>
    </head>
    <body>
        <div class="time_choose">
            <input class="times"/>
        </div> 
        <div class="time_choose">
            <input class="times"/>
        </div> 
        <input type="button" onclick="add();">
        <script type="text/javascript">
            show();
            function add() {
                var sss = '<div class="time_choose"><input class="times"/></div>';
                $("body").append(sss);
                show();
            }
            function show(a,b) {
                var str = '<div class="time_box"><ul class="time_list"><li class="time_item"><span class="prev">&lt;</span><select class="current"></select><span class="next">&gt;</span></li><li class="time_item"><span class="month">一月</span><span class="month">二月</span><span class="month">三月</span><span class="month">四月</span><span class="month">五月</span><span class="month">六月</span><span class="month">七月</span><span class="month">八月</span><span class="month">九月</span><span class="month">十月</span><span class="month">十一月</span><span class="month">十二月</span></li></ul></div>';
                var month_num = new Array("01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12");
                var result1 = "";
                var result2 = "";
                var a = 1950, b = 2117;
                var nowDate = new Date();
                var nowYear = nowDate.getFullYear();
                var flag = 0;
                $(document).on("mouseenter", ".time_choose", function () {
                    flag = 0;
                });
                $(document).on("mouseleave", ".time_choose", function () {
                    flag = 1;
                });

                $(".time_choose .times").focus(function () {
                    if ($(this).siblings(".time_box").length > 0) {
                    } else {
                        $(this).parent().append(str);
                    }
                    $(this).parent().find(".time_box").show();
                    chooseDate(a, b);
                    $(this).parent().find(".current").append(result2);
                    $(this).parent().find(".current").val(nowYear);
                });
                $(".time_choose .times").blur(function () {
                    if (flag === 1) {
                        $(this).parent().find(".time_box").hide();
                    }
                });
                $(document).on("click", ".time_choose .month", function () {
                    var year = $(this).parents(".time_box").find(".current").val();
                    var month = $(this).index();
                    $(this).parents(".time_box").hide();
                    result1 = year + "-" + month_num[month];
                    $(this).parents(".time_choose").find(".times").val(result1);
                });
                function chooseDate(a, b) {
                    for (var i = a; i <= b; i++) {
                        result2 += '<option value=' + i + '>' + i + '</option>';
                    }
                }
                $(document).on("click", ".time_choose .prev", function () {
                    var current = parseInt($(this).siblings('.current').val());
                    if (current === a) {
                        $(this).siblings('.current').val(a);
                    } else {
                        $(this).siblings('.current').val(current - 1);
                    }
                });
                $(document).on("click", ".time_choose .next", function () {
                    var current = parseInt($(this).siblings('.current').val());
                    if (current === b) {
                        $(this).siblings('.current').val(b);
                    } else {
                        $(this).siblings('.current').val(current + 1);
                    }
                });
            }
            ;
        </script>
    </body>
</html>
